<template>
  <!--布局容器-->
  <!--头部导航栏-->
  <el-container class="home-container">
    <el-header>

      <div>
        <img src="../assets/logo.webp" alt="logo">
        <span>健康运动平台</span>
      </div>

      <el-button @click="logout" type="primary" plain round>安全退出</el-button>
    </el-header>
    <!--中间容器-->
    <el-container>
      <!--侧边栏-->
      <el-aside width="300px">
        <el-menu background-color=rgb(228,245,239) text-color="#6A8BAD" active-text-color="#03C2E6" :router="true"> <!--unique scope-->
          <el-submenu :index="item.id+''" v-for="item in menuList" :key="item.id">
            <template slot="title">
              <i :class="isObject[item.id]"></i>
              <span>{{item.title}}</span>
            </template>

            <el-menu-item :index="it.path" v-for="it in item.sList" :key="it.id">
              <template slot="title">
                <i :class="isObject[it.id]"></i>
                <span>{{it.title}}</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!--中间主体部分-->
      <el-main>

        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</template>

<script>
export default {

  data(){
    return {
      // 获取菜单列表
      menuList:[],
      isObject:{
        '100':'el-icon-user',
        '200':'el-icon-tickets',
        '101':'el-icon-tickets',
        '102':'el-icon-eleme',
        '103':'el-icon-eleme',
        '104':'el-icon-eleme',
        '201':'el-icon-eleme',
        '202':'el-icon-eleme',
        '203':'el-icon-eleme',
        '204':'el-icon-eleme',
      }
    }
  },

  created() {
    // 调用getMenuList查询menulist
    this.getMenuList();
  },

  methods:{
    logout(){
        this.$confirm('将退出您的个人账户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '成功退出!'
          });
          window.sessionStorage.clear(); // 用户退出后清楚session
          this.$router.push("/login");  // 回到首页
        })
    },
    async getMenuList(){
      const {data:res} = await this.$http.get("menus");
      this.menuList = res;
      console.log(this.menuList)
    },
  }
}
</script>

<style scoped>
.home-container{
  height: 100%;
}

.el-header{
  background-color: rgb(187,230,214);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  color: #fff;
  font-size: 20px;
}

.el-header > div{
  padding-left: 20px;
  display: flex;
  align-items: center;

}

.el-header > div span{
  margin-left: 15px;
  color: rgb(44,62,112);
  font-family: Roboto,Avenir,Helvetica,Arial,sans-serif;
}

.el-aside{
  background-color: rgb(228,245,239);
}

.el-main{
  background-color: rgb(200,235,223);
}

img{
  height: 55px;
  width: 55px;
}

</style>
